<div class="layui-row layui-col-space15" style="height: 100%; margin: 0; background: #fff">
    <div class="layui-col-sm12 layui-col-md4 layui-col-lg6" style="height: 100%;">
        <div class="layui-card-body" style="padding: 0">
            <table class="layui-table" id="apply-table" lay-filter="apply-table"></table>
        </div>
    </div>
    <div class="layui-col-sm12 layui-col-md8 layui-col-lg6" style="height: 100%; background: #fff">
        <div class="layui-card-body" style="padding: 0">
            <div>
                <span id="applyUser"></span>
                <button id="apply-btn-add" class="layui-btn icon-btn" style="background: #38B7CB;"><i class="layui-icon">&#xe654;</i>添加用户</button>
            </div>
            <table class="layui-table" id="apply-user-table" lay-filter="apply-user-table"></table>
        </div>
    </div>
</div>


<!-- 表格操作列 -->
<script type="text/html" id="apply-table-bar">
    <a class="layui-btn layui-btn-xs" lay-event="open" style="background: #38B7CB;">开通续费</a>
    <a class="layui-btn layui-btn-xs" lay-event="set" style="background: #38B7CB;">设置用户</a>
</script>

<script type="text/html" id="apply-user-table-bar">
    <a class="layui-btn layui-btn-xs" lay-event="del" style="background: #38B7CB;">移除</a>
</script>

<script>
    layui.use(['form', 'table', 'config', 'admin', 'util'], function () {
        var form = layui.form,
            table = layui.table,
            config = layui.config,
            util = layui.util,
            applyData = {},
            admin = layui.admin;

        let myTable = table.render({
            elem: '#apply-table',
            where: {
                access_token: config.getToken().access_token
            },
            url: config.base_server + 'api-sys/api/entApp/list',
            height: 'full',
            skin: 'nob',
            even: true,
            cols: [[
                {field: 'photo', title: '封面'},
                {field: 'appname', title: '应用名称'},
                {
                    field: 'des', title: '应用描述', width: 300, templet: function (d) {
                        var params = {
                            app_id: d.app_id,
                            ent_code: 'E2E'
                        }
                        var userData = {};
                        admin.req('api-sys/api/entUserApp/list', params, function (data) {
                            userData = data ? data : '未开通';
                        }, 'GET');
                        return `<span>用户数${userData.count}，到期日期${util.toDateString(d.limitDate)}</span>`;
                    }
                },
                {title: '操作', toolbar: '#apply-table-bar', align: 'center'}
            ]]
        })

        table.on('tool(apply-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'set') {
                var userTable = function () {
                    table.render({
                        elem: '#apply-user-table',
                        where: {
                            access_token: config.getToken().access_token,
                            app_id: data.app_id,
                            ent_code: 'E2E'
                        },
                        url: config.base_server + 'api-sys/api/entUserApp/list',
                        height: 'full',
                        skin: 'nob',
                        even: true,
                        cols: [[
                            {field: 'username', title: '账号'},
                            {field: 'nickname', title: '姓名'},
                            {field: 'entname', title: '部门'},
                            {title: '操作', toolbar: '#apply-user-table-bar'}
                        ]],
                        done: function (res, curr, count) {
                            var val = `<span>${data.appname}</span>用户列表,用户数 <span>${res.count}</span>人`
                            $('#applyUser').html(val);
                        }
                    })
                }
                userTable()

                $('#apply-btn-add').click(function (data) {
                    admin.putTempData('appData', obj.data);
                    admin.popupCenter({
                        title: '添加用户',
                        path: 'pages/business/addApplyUserForm.html',
                        area: '590px',
                        finish: function () {
                            table.reload('apply-user-table', {});
                            userTable()
                        }
                    });

                })
            }
        })

        table.on('tool(apply-user-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if(layEvent === 'del') {
                layer.confirm('确定要删除吗？', function (i) {
                    layer.close(i);
                    layer.load(2);
                    admin.req('api-sys/api/entUserApp/del/' + data.ent_user_id, {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 0) {
                            layer.msg(data.msg, {icon: 1, time: 500});
                            obj.del();
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 500});
                        }
                    }, 'DELETE');
                });
            }
        })
    })
</script>